<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #allmap {
            width: 100%;
            height: 700px;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=IYrcBQaaLVKXdIFjrMCAs7mOm3RcmrEI"></script>
    <script type="text/javascript" src="/js/CurveLine.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
    <title>查看数据分布</title>
</head>
<body>
<jsp:include page="/WEB-INF/jsp/include/header.jsp"/>

<c:set var="citys" value="${fn:split('上海,北京,天津,重庆,南京,苏州,合肥,青岛,杭州,宁波,长沙,武汉,郑州,广州,深圳,东莞,佛山,南宁,成都,西安', ',')}"/>

<div>
    <form action="" method="get">
        城市:
        <select name="city">
            <c:forEach var="city" items="${citys}">

                <option value="${city}" <c:if test="${param.city eq city}">selected="selected"</c:if>>
                        ${city}
                </option>
            </c:forEach>

        </select>
        日期：
        <select name="date">
            <option value="">请选择</option>
            <c:forEach var="data" items="${dates}">

                <option value="${data.field}" <c:if test="${param.date eq data.field}">selected="selected"</c:if>>
                        ${data.field}(${data.count})
                </option>
            </c:forEach>

        </select>
        /
        <label>（数据分布 <input type="radio" name="type" value="0"
                            <c:if test="${param.type eq 0 or empty param.type}">checked="checked"</c:if>>)、</label>
        <label>（人工路线 <input type="radio" name="type" value="1" <c:if test="${param.type eq 1}">checked="checked"</c:if>>)、</label>
        <label>（程序路线 <input type="radio" name="type" value="2" <c:if test="${param.type eq 2}">checked="checked"</c:if>>)、</label>
        <%--<label>（程序路线-无路程时间 <input type="radio" name="type" value="3" <c:if test="${param.type eq 3}">checked="checked"</c:if>>）</label>--%>
        <%--<label>（程序路线-时间范围+同点归一 <input type="radio" name="type" value="4" <c:if test="${param.type eq 4}">checked="checked"</c:if>>）</label>--%>
        <label>（程序路线-近地铁) <input type="radio" name="type" value="5" <c:if test="${param.type eq 5}">checked="checked"</c:if>>）</label>
        /
        <input type="submit">
        |${fn:length(reports)}条线路

        || <a href="javascript: myDis.open()">鼠标测距</a>
        <a href="javascript: myDis.close()">关闭鼠标测距</a>
    </form>

</div>


<div id="allmap"></div>

<c:if test="${not (param.type eq 0 or empty param.type)}">
    <form>
        <input type="hidden" name="city" value="${param.city}">
        <input type="hidden" name="date" value="${param.date}">
        <input type="hidden" name="type" value="${param.type}">
        <input type="hidden" name="lines" value=",">

        <h2>
            线路详情 <input type="submit" value="只显示指定的线路">
            <label>
                显示未勾选的点 <input type="checkbox" name="hideOtherLine" value="1"
                               <c:if test="${param.hideOtherLine eq 1}">checked="checked"</c:if>>
            </label>
        </h2>
        <table border="1">
            <thead>
            <tr>
                <td>线路编号</td>
                <td>检测师</td>
                <td>具体路线</td>
                <td>只显示改线路</td>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="points" items="${reports}" varStatus="status">
                <tr>
                    <td>
                        NO.${status.index + 1}
                    </td>
                    <td>
                            ${points.key}
                    </td>
                    <td>
                        <table>
                            <c:set var="line" value=","/>
                            <c:forEach var="p" items="${points.value}" varStatus="s">
                                <tr>
                                    <td>N.${s.index + 1}</td>
                                    <td>${p.id}</td>
                                    <td>
                                        <fmt:formatDate value="${p.checkTime}" pattern="HH:mm"/>
                                        ~
                                        <fmt:formatDate value="${p.endCheckTime}" pattern="HH:mm"/>
                                    </td>
                                    <td>${p.branchCityName} ${p.branchAreaName} ${p.address}</td>
                                    <td>${p.lng},${p.lat}</td>

                                    <%--private String metroLineName; // 地铁线名称--%>
                                    <%--private Long metroOffLineTime; // 线下所需时间 单位为秒--%>
                                    <%--private Long metroOnLineTime; // 地铁上所需时间 单位为秒--%>
                                    <%--private Double metroLng;--%>
                                    <%--private Double metroLat;--%>
                                    <%--private String tempText;--%>
                                    <td>${p.metroLineName}-off;${p.metroOffLineTime}-on:${p.metroOnLineTime}</td>

                                    <c:set var="line" value="${line}${p.id},"/>
                                </tr>
                            </c:forEach>

                        </table>

                    </td>
                    <td>
                        <input type="checkbox" name="lines" value="${line}"
                               <c:if test="${fn:contains(fn:join(paramValues.lines, ','), line)}">checked='checked'</c:if>>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </form>
</c:if>
</body>
</html>
<script type="text/javascript">

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(121.49188886, 31.2252692854);
    map.centerAndZoom(point, 8);
    map.enableScrollWheelZoom(true);

    var myDis = new BMapLib.DistanceTool(map);

    // 路线规划
    <c:if test="${not (param.type eq 0 or empty param.type)}">
    <c:if test="${not empty dandianReports}">
    <c:set var="reports"  value="${dandianReports}"/>
    </c:if>
    var data = [
        <c:forEach var="points" items="${reports}">
        [
            <c:forEach var="p" items="${points.value}">
            ${p},
            </c:forEach>
        ],
        </c:forEach>
    ]

    for (var i = 0; i < data.length; i++) {
        var points = [];
        for (var j = 0; j < data[i].length; j++) {
            points[j] = new BMap.Point(data[i][j]['lng'], data[i][j]['lat']);
            var checkTime = new Date(data[i][j]['checkTime']);
            points[j].info = data[i][j]['id'] + " " + checkTime.getHours() + ":" + checkTime.getMinutes() + "|" + data[i][j]["tempText"] + "+" + ( data[i][j]["metroOnLineTime"] / 60);
        }
        var curve = new BMapLib.CurveLine(points, {
            strokeColor: "blue",
            strokeWeight: points.length / 2 + 1,
            strokeOpacity: 0.3
        }); //创建弧线对象

        curve.enableEditing(); //开启编辑功能

        map.addOverlay(curve); //添加到地图中
    }
    </c:if>



    // 数据分布
    <c:if test="${param.type eq 0 or empty param.type}">
    var date = [
        <c:forEach items="${reports}" var="report">
        <c:if test="${report.lng ne 0 and report.lat ne 0 }">
        ['${report.id} <fmt:formatDate value="${report.checkTime}" pattern="HH:mm" />', ${report.lat}, ${report.lng}],
        </c:if>
        </c:forEach>
    ];

    for (var i = 0; i < date.length; i++) {
        var point = new BMap.Point(date[i][2], date[i][1]);
        var label = new BMap.Label(date[i][0],
            {
                offset: new BMap.Size(20, -10)
            });
        label.setStyle(
            {
                fontSize: "8px",
                backgroundColor: "rgba(1,1,1,0.3)"
            }
        )
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        marker.setLabel(label);
    }
    </c:if>


</script>

